<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>教学日历</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" type="text/css" href="../../../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/app.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/util/utils.css" />
		<style>
			body{
				background-color: #EFF7F6;
				height: 603px;
			}
			
			.mui-content{
				background-color: #EFF7F6;
				margin-left: 12px;
				margin-right: 10px;
			}
			
			table {
				table-layout: fixed; 
				empty-cells: show; 
				border-collapse: collapse; 
				margin: 0 auto; 
				width: 100%;
				text-align: center;
			}
			table tr{
				height: 55px;
 				line-height: 16px;
 				border-bottom: 1px solid #CDE5D3;
			}
			
			table tr th{
				background-color: #EFF7F6;
				color: #909090;
			}
			
			table tr td{
				background-color: #EAF4F3;
				color: #616161;
				font-size: 12px;
			}
			
			table tr .today{
				color: #FFFFFF;
				background: url(img/hongqiu_03.png) no-repeat 6px 6px;
				background-size: 80%;
			}
		</style>
	</head>
	<body>
		<div id="" class="mui-content">
			<div style="padding-top: 12px;">
				<div style="float: left; margin-left: 15px;">
					<span>2017年2月</span>
				</div>
				<div style="float: right; margin-right: 13px;">
					<span>
						<img src="img/liebiao_03.png" style="width: 23px;" />
					</span>
					
					<span>
						<img src="img/tianjia_06.png" style="width: 13px; margin-left: 15px;" />
					</span>
				</div>
			</div>
			<div id="dvrltable" style="padding-top: 33px;">
				<table id="riltable">
					
				</table>
			</div>
			<div id="dvcontent" style="background-color: #EFF7F6;">
				
			</div>
		</div>
	</body>
	<script src="../../../js/mui.min.js"></script>
	<script src="../../../js/jquery-1.8.3.min.js"></script>
	<script src="js/rili.js"></script>
	<script>
		window.onload = function(){
			createTableHtml(); 
		}
		
		function createTableHtml(){
			var $row; //行 
			var $column; //列
			var $currTime = new Date();
			var $currYearInfo = getYearInfo($currTime); //获取当前年份信息
			var $cmonth = $currYearInfo.month;
			
			var $trth = document.createElement("tr");
			$trth.innerHTML = calendarTableThHtml();
			document.getElementById("riltable").appendChild($trth);
			
			for($row = 0; $row < $currYearInfo.tableRows; $row += 1){ //循环表格行
				var $tr = document.createElement("tr");
				for($column = 0; $column < 7; $column ++){ //循环表格列
					var $td = document.createElement("td"); //创建td
					var $idx = 7 * $row + $column; //为每个表格创建索引,从0开始
					var $date = $idx - $currYearInfo.firdayOfWeek + 1; //将当月的1号与星期进行匹配
					var $lical = ""; //农历日期
					if($date <= 0 || $date > $currYearInfo.daysArrMonth[$cmonth]){
						$date = " ";
					} else { //索引小于等于0或者大于月份最大值就用空表格代替
						$date = $idx - $currYearInfo.firdayOfWeek + 1;
						//$lical = "初九"; 
						$lical = LunarDate.GetLunarDay($currYearInfo.year, $currYearInfo.month + 1, $date); //获取农历日期
						$lical = $lical.substr($lical.length - 2);
					}
					
					if($date == $currYearInfo.day){ //突出显示当前天
						$td.innerHTML = '<td><span>' + $date +'</span><span style="display: block">'+ $lical +'</span></td>';
						//$td.innerHTML = '<td>' + $date + '</td>';
						$td.className = "today"; 
						$td.id = "today";
					} else { 
						$td.innerHTML = '<td><span>' + $date +'</span><span style="display: block">'+ $lical +'</span></td>';
						//$td.innerHTML = '<td>' + $date + '<br/>'+ $lical +'</td>';
						//$td.innerHTML = '<td>' + $date + '</td>';
					}
					$tr.appendChild($td);
				}
				document.getElementById("riltable").appendChild($tr);
			}
		}
		
		mui("#riltable").on("tap", "td", function(){
			if(this.innerHTML != document.getElementById("today").innerHTML){
				$("#riltable td").css("background", "");
				$("#riltable td").css("color", "#616161");
			}
			
			this.style.background = "url(img/lanqiu_03.png) no-repeat 6px 6px";
			this.style.color = "#FFFFFF";
			this.style.backgroundSize = "80%";
			document.getElementById("dvcontent").innerHTML = this.innerText;
		});
		
	</script>
</html>